<template>
    <div class="selectCity">
        <div class="header">
            <p class="header_l" @click="toHome()">取消</p>
            <p class="header_r">
                <img src="../../static/img/search_icon.png" alt="">
                <input type="text" placeholder="搜索城市" v-model.trim="selectCityVal" @keyup="searchCity()">
            </p>
        </div>
        <div class="city">
            <div class="city-wrapper city-wrapper-hook" ref="scroller">
                <div class="scroller-hook">
                    <div class="city_hot_box" v-show="hotCitysHidden">
                        <p class="city_hot_tit">热门城市</p>
                        <ul class="city_hot_box_ul">
                            <li class="city_hot_box_list" v-for="(item,index) in cityDataHot" :key="index" @click="selectCityClick(item.name)">
                                {{item.name}}
                            </li>
                        </ul>
                    </div>
                    <div class="cities cities-hook">
                        <div v-for="(items,index) in newCityData" :key="index">
                            <div class="title" ref="cityItem" :data-name="items.name">{{items.name}}</div>
                            <ul>
                                <li v-for="(item,index) in items.cities" class="item city-click" :data-name="item.name" :data-id="item.code" @click="selectCityClick(item.name)" :key="index">
                                    <span class="border-1px name">{{item.name}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="shortcut shortcut-hook">
            <ul>
                <li @click="selsectLetter($event)" v-for="(item,index) in cityDataList" :key="index" :data-anchor="item.name" class="item">{{item.name}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
import { cityDataHot, cityData } from "../assets/js/citys";
export default {
  name: "selectCity",
  data() {
    return {
            token: localStorage.getItem("token")?localStorage.getItem("token"):'',
      tokenParams:{
          token:localStorage.getItem("token")?localStorage.getItem("token"):''
      },
      title: "",
      cityDataHot: cityDataHot /*热门城市列表 */,
      cityDataList: cityData /*城市列表*/,
      newCityData: [] /*输入搜索之后的城市数组 */,
      newCityDataList: [] /*输入搜索之后的城市数组 */,
      scroll: null /*滚动变量 */,
      selectCityVal: "" /*输入框选择值 */,
      hotCitysHidden: true /*隐藏热门城市 */,
      timer: null,
      myCity:''/*我所在的城市 */
    };
  },
  created() {
    this.newCityData = this.cityDataList;
    this.locationCity();
  },
  mounted() {
    this.$nextTick(() => {
      this.initScroller();
    });
  },
  methods: {
    toHome() {
      this.$router.push("/wx/home");
    },
    /*定位城市 */
        locationCity(){
            this.axios.get('https://restapi.amap.com/v3/geocode/regeo?key=e9dc8af485ecf2e4a0d41c06691e6325&location=116.466064,39.904469').then(r=>{
                
            })


            if(this.$route.query.selectCity){ /*从选择城市页面过来 */
                this.myCity=this.$route.query.selectCity;
            }else{
                this.myCity='默认';/*这里需要定位城市 */
            }
        },
    /*初始化滚动 */
    initScroller() {
      let bscrollDom = this.$refs.scroller;
      this.scroll = new BScroll(bscrollDom, { click: true, tap: true });
    },
    /*选择字母*/
    selsectLetter(event) {
      let _self = this;
      const srcEl = event.target || event.srcElement;
      let dataAnchor = srcEl.getAttribute("data-anchor");
      let cityItems = this.$refs.cityItem;
      let thisItem = "";
      for (var i = 0; i < cityItems.length; i++) {
        if (dataAnchor == cityItems[i].getAttribute("data-name")) {
          thisItem = cityItems[i];
        }
      }
      this.scroll.scrollToElement(thisItem, 500);
    },
    /*选择城市点击事件*/
    selectCityClick(val) {
        let _self = this;
      this.selectCityVal = val;
      _self.$store.commit('setCity',val)
      this.$router.push({path:'/wx/home',query:{selectCity:val}});
      
    },

    /*搜索*/
    searchCity() {
      let cityItemFirst = this.$refs.cityItem[0];
      const _self = this;
      this.hotCitysHidden = false;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (!this.selectCityVal) {
        this.newCityData = cityData;
        return;
      }
      this.timer = setTimeout(function() {
        let results = [];
        let result = [];
        _self.selectCityVal = _self.selectCityVal.trim().toUpperCase();
        _self.cityDataList.forEach((item, index) => {
          result = item.cities.filter(e => {
            return e.tags.includes(_self.selectCityVal);
          });
          results.push({ name: item.name, cities: result });
        });
        results = results.filter(item => {
          return item.cities.length !== 0;
        });
        _self.newCityData = results;
        _self.scroll.scrollToElement(cityItemFirst, 500);
      }, 100);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import url(../assets/less/public.less);
.selectCity {
  @font14();
  background: @config-bg3;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 92px;
    @flex();
    @justify5();
    background: @config-bg2;
    box-sizing: border-box;
    padding: 0 30px;
    z-index: 99;
    .header_l {
      margin-right: 20px;
    }
    .header_r {
      height: 56px;
      line-height: 56px;
      text-align: center;
      flex-grow: 1;
      background: @config-bg3;
      border-radius: 8px;
      @color2();
      @inputTextarea();
      @flex();
      @justify2();
      box-sizing: border-box;
      padding-left: 20px;
      img{
          width: 30px;
          margin-right: 10px;
      }
      input {
        background: none;
        flex-grow: 1;
      }
    }
  }
  /********************/

  /**********************/
  .city {
    display: block;
    margin-top: 92px;
    .city_hot_box {
      padding: 30px;
      box-sizing: border-box;
      background: @config-bg3;
      .city_hot_tit {
        text-align: left;
        margin-bottom: 30px;
      }
      .city_hot_box_ul {
        @flex();
        @justify1();
        flex-wrap: wrap;
        li {
          width: 31%;
          margin-right: 3.5%;
          background: @config-bg2;
          border-radius: 6px;
          height: 50px;
          line-height: 50px;
          margin-bottom: 20px;
        }
        li:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }
  .city .city-wrapper {
    position: fixed;
    top: 92px;
    bottom: 0;
    width: 100%;
    z-index: 100;
    background-color: #fff;
    z-index: 1;
  }
  .city .city-wrapper .cities .title {
    height: 60px;
    padding-left: 30px;
    line-height: 60px;
    background-color: @config-bg3;
    font-family: Helvetica;
    text-align: left;
  }
  .city .city-wrapper .cities .item {
    height: 60px;
    padding-left: 80px;
    line-height: 60px;
    text-align: left;
    span {
      border-bottom: 1px solid #e5e5e5;
    }
  }
  .city .city-wrapper .cities .item .name {
    display: block;
    position: relative;
  }

  .city .city-wrapper .cities .item:active {
    background-color: #f0f0f0;
  }

  .shortcut {
    position: fixed;
    z-index: 30;
    width: 40px;
    right: 0;
    top: 30%;
    font-family: Helvetica;
  }
  .shortcut .item {
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: @config-bg13;
  }
  @media only screen and (max-height: 600px) {
    .city .city-wrapper .shortcut .item {
      padding-top: 3px;
    }
  }
  .cities .cities-hook > div {
    width: 70%;
  }
  /**********************/
  * {
    margin: 0;
    padding: 0;
  }
  .mycity {
    text-align: center;
    margin: 20px 0;
  }
  .list-box {
    padding: 0 43px;
  }
  .list-item {
    height: 43px;
    line-height: 42px;
    border-bottom: 1px solid #ececec;
    text-align: center;
  }
  .list-item input {
    border: none;
    text-align: center;
    outline: none;
  }
  .small-icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
  .toast {
    position: fixed;
    z-index: 2000;
    left: 50%;
    top: 45%;
    transition: all 0.5s;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    border-radius: 5px;
    color: #fff;
    background: rgba(17, 17, 17, 0.7);
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    max-width: 150px;
  }
}
</style>

